<template>
	<view :id="id" class="weui-tabbar">
		<view class="weui-tabbar__item" :class="{'weui-bar__item_on':current===index}" :key="index" v-for="(item,index) in getItems" @click="to(item,index)">
			<span style="display: inline-block;position: relative;">
			    <view v-if="item.circle">
					<view class="circle">
						<uniIcon if="item.icon" :type="item.icon" :color="color" :size="size" right="0"></uniIcon>
					</view>
					<view :style="{'height':size}"></view>
				</view>
				<view v-else style="line-height:1;">
					<image v-if="item.image" class="weui-tabbar__icon" :src="(current===index? item.image_select:item.image)" :style="{height:item.heigth,width:item.width}"></image>
					<uniIcon v-else-if="item.icon" :type="item.icon" :color="color" :size="size" right="0"></uniIcon>
				</view>
				<!-- <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span> -->
			</span>
			<view class="weui-tabbar__label" :style="{'font-size':color}">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
		
    export default {
		components: { uniIcon },
		name: 'tabbar-menu',
		props: {
			id:{
				type:String,
				default:"tabbar-bottom"
			},
			size:{
				type:[Number,String],
				default:"24px"
			},
			color:{
				type:String,
				default:""
			},
			type:{
				type:String,
				default:"common"
			},
			params:{
				type:Array,
				default:undefined
			},
			items:{
				type: Array,
				default: function(e) {
				    return []
				}
			}
		},
		data() {
			return {
				current:undefined
			}
		},
		created() {
			var th = this;
			var url = this.$root.route;
			if(url==undefined) {
				// #ifdef MP-WEIXIN || MP-TOUTIAO
				url = this.$root.$mp.page.route;
				// #endif
				
				// #ifdef MP-BAIDU
				url = this.$root.$mp.page.is;
				// #endif
			}
			url = url.replace("pages","");
			this.getItems.forEach(function(item,index){
				if(item.url.lastIndexOf(url)>-1){
					th.current = index;
				}
			});
		},
		methods: {
			to(item,index) {
				if(this.current!=index){
					if(item.way=="to"){
						uni.navigateTo({ 
							url: item.url , 
							animationType: 'pop-in',
							animationDuration: 300,
						});
					}else{
						//if(index==0 || this.$users.checkLogin()){
							uni.reLaunch({
							    url: item.url
							});
						//}
					}
				}
			}
		},
		computed: {
			getItems() {
				if(this.type!=""){
					var menus = this.$menu.menus[this.type];
					if(this.params)
					{
						this.params.forEach(function(item,index){
							var url = menus[item.index].url;
							if(url.lastIndexOf(item.value)==-1)
							{
								menus[item.index].url  = url + (url.lastIndexOf("?")==-1 ? "?" : "") + item.value;
							}
						});
					}
					return menus;
				}else{
					return this.items;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.weui-tabbar{
		background-color: #ffffff;
		position: fixed;
	}
	.circle{
		position: absolute;
		top: -25px;
		right: calc(100% - 20px);
		border: 1px solid $uni-theme-color;
		border-radius: 50%;
		text-align: center;
		height: 40px;
		width: 40px;
		line-height: 38px;
		color: $uni-theme-color;
		background-color: #fff;
	}
</style>
